<template>
  <div id="blind-box">
    <bindBoxCard :homeIsShow="true" :goodsIsShow="false" :allDataList="allDataList" :activeIndex="activeIndex" :timeShow="false"  v-if="inShow" ></bindBoxCard>
    <span class="price-pnae" v-if="inShow">
      <span class="price-icon">￥</span>
      <span>{{allDataList.activity? allDataList.activity.price : ''}}/个</span>
    </span>
    <div class="middle-reward" v-if="inShow">
      <div class="middle-reward-box" v-for="(item,index) in allDataList.activity.level" :key="index">
        <img :src="item.level_img_src" alt="">
        <span class="name">{{item.level_name}}</span>
        <span class="rato">{{item.probability}}%</span>
      </div>
    </div>
    <div class="top-tip">开箱必出以下宝贝之一</div>
    <div class="bottom-tip" v-if="inShow">不满意可以兑换<block v-for="(item,index) in allDataList.deductionType" :key="index">{{item}}<block v-if="index == 0">/</block> </block></div>
    <div class="meal-pane">
      <div class="meal-box" v-for="(item,index) in allDataList.goods" :key="index">
        <img :src="item.thumb" alt="">
        <div class="text-detail">
          <div class="name">{{item.title}}</div>
          <div class="price">
            <span class="price-symbol">￥</span>
            <span class="price-val">{{item.price}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom" :class="[this.fun.getPhoneEnv() == 3 ? 'pcStyle' : '']">
      <div class="open-sty" @click="clickUnpack ">立即开箱</div>
    </div>
    <issueGoods pageType="blind_box" :overlayShow.sync="overlayShow" :newBlindBoxData="newBlindBoxData" v-if="overlayShow"></issueGoods>

  </div>
</template>

<script>
import blind_box_controller from "./blind_box_controller.js";
export default blind_box_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
#blind-box {
  background: #242052;
  // height: 100vh;

  .price-pnae {
    padding: 0.3rem 0.7rem;
    color: #fd0000;
    background-color: rgba(255, 255, 255, 0.1);
    font-weight: bold;
    font-size: 1.15rem;

    .price-icon {
      font-size: 0.8rem;
    }
  }

  .middle-reward::-webkit-scrollbar {
    display: none;
  }

  .middle-reward {
    background: white;
    margin: 2.3rem 0.6rem 1.23rem 0.6rem;
    padding: 0.58rem 0.5rem 0.58rem 0.5rem;
    border-radius: 0.25rem;
    display: flex;
    // justify-content: space-between;
    overflow-y: auto;
    display: -webkit-box;

    .middle-reward-box {
      display: flex !important;
      flex-direction: column;
      line-height: 1;
      width: 4.35rem;

      img {
        width: 1.88rem;
        height: 1.88rem;
        border-radius: 50%;
      }

      .name {
        font-size: 0.55rem;
        font-weight: 400;
        color: #333;
        margin: 0.5rem 0;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
      }

      .rato {
        font-size: 0.55rem;
        font-weight: 400;
        color: #333;
      }
    }
  }

  .top-tip {
    font-size: 0.95rem;
    font-weight: bold;
    color: #fff;
    line-height: 1;
  }

  .bottom-tip {
    font-size: 0.75rem;
    font-weight: 400;
    color: #fd0000;
    line-height: 1;
    margin: 0.53rem 0 0.68rem 0;
  }

  .meal-pane {
    padding-bottom: 6.2rem;

    .meal-box {
      display: flex;
      padding: 0.65rem;
      background: white;
      margin: 0.6rem;
      border-radius: 0.25rem;

      img {
        width: 3.95rem;
        height: 3.95rem;
        margin: 0;
        padding: 0.15rem;
      }

      .text-detail {
        display: flex;
        flex-direction: column;
        text-align: left;
        justify-content: space-between;
        margin: 0 0.525rem;
        width: calc(100% - 3.95rem);

        .name {
          font-size: 0.75rem;
          font-weight: 500;
          color: #222;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .price {
          .price-symbol {
            font-size: 0.55rem;
            font-weight: 500;
            color: #ed1818;
            zoom: 0.8;
          }

          .price-val {
            // font-size: 0.8rem;
            font-weight: 500;
            color: #ed1818;
          }
        }
      }
    }
  }

  .pcStyle {
    width: 375px !important;
  }

  .bottom {
    background: #fff;
    border-radius: 1rem 1rem 0 0;
    margin-top: 1.83rem;
    padding: 0.25rem 1.38rem;
    position: fixed;
    bottom: 0;
    width: 100%;

    .open-sty {
      background: #fd7383;
      border-radius: 0.25rem;
      color: white;
      padding: 1rem 0;
    }
  }
}
</style>
